<template>
	<view>
		<!-- 顶部信息展示 -->
		<view class="ding_bu_xin_xi_zhan_shi">
			<image src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
				class="tu_pian"></image>
			<view class="you_ce_xin_xi">
				<span>服务名称</span>
				<span>服务人员</span>
				<span>￥88元</span>
			</view>
		</view>
		
		
		<!-- 中间数据提交 -->
		<view class="zhong_jian_shu_ju_ti_jiao">
			<u-form style="margin-right: 20rpx;margin-left: 20rpx; "  labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<u-form-item   label-width="150rpx" label="订单号" prop="userInfo.name" borderBottom ref="item1">
					<u-input disabled v-model="model1.userInfo.name"></u-input>
				</u-form-item>
				<u-form-item  label-width="150rpx"   label="服务时间" prop="userInfo.name" borderBottom ref="item1">
					<u-input disabled v-model="model1.userInfo.name"></u-input>
				</u-form-item>
				<u-form-item  label="服务地址"  label-width="150rpx" prop="userInfo.name" borderBottom ref="item1">
					<u-input disabled v-model="model1.userInfo.name"></u-input>
				</u-form-item>
				
			</u-form>
		</view>
		
		
		
		<view class="xu_zhi">
			<view class="ping_jia">
				<span style="margin-top: 10rpx;">服务评价:</span>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__tag-item">
							<u-rate size="50"></u-rate>
						</view>
					</view>
				</view>
			</view>
			
			<view class="ping_jia">
				<span style="margin-top: 10rpx;">服务态度:</span>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__tag-item">
							<u-rate size="50"></u-rate>
						</view>
					</view>
				</view>
			</view>
			
			<view class="ping_jia">
				<span style="margin-top: 10rpx;">服务技能:</span>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__tag-item">
							<u-rate size="50"></u-rate>
						</view>
					</view>
				</view>
			</view>
			
			<view class="ping_jia">
				<span style="margin-top: 10rpx;">清洁卫生:</span>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__tag-item">
							<u-rate size="50"></u-rate>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="cu-bar bg-white tabbar border shop solid-top" style="position: fixed; bottom: 0;width: 100%; z-index: 9999;">
			<!-- <button class="action" open-type="share">
				<view class="cuIcon-share text-green">
					<view class="cu-tag badge"></view>
				</view> 分享
			</button>
			<view class="action text-orange">
				<view class="cuIcon-favorfill"></view> 已收藏
			</view> -->
			<view class="btn-group">
				<button open-type="contact" style="width: 30%;" class="cu-btn bg-gradual-blue round shadow-blur">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
import color from '../../uview-ui/libs/function/color'
	export default {
		data() {
			return {
				fkfs:"现金支付",
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		methods: {
		to_D(){
			console.log(0)
		}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.ding_bu_xin_xi_zhan_shi {
		width: 700rpx;
		margin: 0 auto;
	

		display: flex;
		flex-direction: row;

		.tu_pian {
			width: 500rpx;
		
			height: 250rpx;
		}

		.you_ce_xin_xi {
			width: calc(700px - 500px);
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 35rpx;

			span {
				margin-top: 30rpx;
			}
		}

	}
	
	
	.zhong_jian_shu_ju_ti_jiao{
		background-color: #fff;
		width: 700rpx;
		margin: 0 auto;
	}
	
	
	.xu_zhi{
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	
		
		margin-top: 20rpx;
		
		
		.ping_jia{
			display: flex;
			flex-direction: row;
		}
	}
</style>